<script setup>
import {computed, ref, watch} from 'vue'

const props = defineProps(['total', 'per_page_list'])
const emit = defineEmits(['changeCurrentPage', 'changePerPageSize']);

const isOpen = ref(false)
// const total = ref(props.total)
const per_page_list = props.per_page_list ? props.per_page_list : [10, 20, 40];
const per_page = ref(per_page_list[0])
const current_page = ref(1)
const input_page = ref('')
const max_page = computed(() => {
    return Math.ceil(props.total/per_page.value);
})
const pages = computed(() => {
    
    let start = 1;
    let end = max_page.value <= 9 ? max_page.value : 9 
    const p = []

    if (current_page.value-4 >= 1 && current_page.value+4 <= max_page.value) {
        start = current_page.value - 4;
        end = current_page.value + 4;
    } else if (current_page.value-4 < 1){
        start = 1;
        end = max_page.value <= 9 ? max_page.value : 9 ;
    } else if (current_page.value+4 > max_page.value) {
        start = max_page.value - 8 >= 1 ? max_page.value - 8 : 1;
        end = max_page.value;
    }

    for (let i=start; i<=end; i++) {
        p.push(i)
    }
    // console.log("pages computing", p, "cur", current_page.value, "max" ,max_page.value)
    return p;
})

// watch(props, () => {
//     if (total.value != props.total) {
//         total.value = props.total 
//     }
// })
// 总记录数变化时，页面总数会重新计算，需要重置currentPage
// watch(total, () => {
//     jumpTo(1)
// })


function jumpTo(index) {
    if (index >= 1 && index <= max_page.value) {
        current_page.value = index;
        emit('changeCurrentPage', index);
    }

}

function openSelect(e) {
    e.stopPropagation();
    isOpen.value = !isOpen.value
}

function choosePerPage(amount) {
    per_page.value = amount;
    emit('changePerPageSize', amount);
    jumpTo(1)
    isOpen.value = !isOpen.value;
}

function jumpToByInput(e) {
    const parsed = Number.parseInt(input_page.value)
    if(e.key == 'Enter' && Number.isInteger(parsed)) {
        jumpTo(parsed);
        input_page.value = ''
    }
}

document.addEventListener('click', () => {
    isOpen.value = false;
})

</script>

<template>
    <div class="pagination">
        <div class="total-page" >总共 {{ props.total }}</div>
        <span @click="jumpTo(current_page-1)" >&lt;</span>
        <span v-for="index in pages" :class="{'active-page': index === current_page}" @click="jumpTo(index)" >{{index}}</span>
        <span @click="jumpTo(current_page+1)" >&gt;</span>
        <div class="per-page" >
            <div class="select-selected" @click="openSelect" :class="{'arrow-up': isOpen}" >{{per_page}}条/页</div>
            <div class="select-items" :class="{'items-open': isOpen}" >
                <div v-for="(amount, index) in per_page_list" :key="index" class="select-option" :class="{'option-selected': per_page === amount}" @click="choosePerPage(amount)" >{{amount}}条/页</div>
            </div>
        </div>
        <div class="go-to" >跳转到 <input type="text" v-model="input_page" @keypress="jumpToByInput" /> </div>
    </div>
</template>


<style scoped>
.pagination {
    height: 45px;
    line-height: 45px;
}
.total-page {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    margin: 0 10px;
    color: #707070;
}

.pagination > span {
    color: black;
    border: solid 1px #a19d9d;
    display: inline-block;
    margin: 0 4px;
    text-align: center;
    width: 35px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    user-select: none;
    color: #707070;
    border-radius: 6px;
    
}



.pagination span:hover:not(.active-page) {
    background-color: #dbdde3;
}

.pagination span.active-page {
    background-color: #8493a6;
    color: white;
    border: 0px;
}

.per-page {
    display: inline-block;
    height: 35px;
    width: 120px;
    line-height: 35px;
    margin: 0 10px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    color: #707070;
}

.select-selected {
    width: inherit;
    position: relative;
    cursor: pointer;
    user-select: none;
    padding: 0px 10px;
    --arrow-open: 45deg;
}

.select-selected::after {
  
    
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 3px solid;
    border-color: transparent #fff #fff transparent;
    transform: rotate(var(--arrow-open));

    position: absolute;
    right: 10px;
    top: 10px;
    transition: transform 0.25s;
}

.select-selected.arrow-up {
    --arrow-open: -135deg;
}



.select-items {
    width: inherit;
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    animation-name: open-options;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    z-index: 9;
}

@keyframes open-options {
    from {
        opacity: 0;
        top: 50%;
    }
    to {
        opacity: 1;
        top: 100%;
    }
}

.select-items.items-open {
    display: block;
    color: #707070;
}

.select-option {
    user-select: none;
    cursor: pointer;
    background-color: #fff;
    padding: 0px 10px;
    color: #707070;
}

.select-option:hover {
    background-color: white;
}

.select-option.option-selected {
    cursor: not-allowed;
    background-color: #dbdde3;
    color: #707070;
}

.go-to {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    margin: 0 10px;
}

.go-to input {
    width: 60px;
    padding-left: 6%;
    color: #707070;
    outline: none;
    border-radius: 6px;
    height: 35px;
    border: 0px;
    font-size: 16px;
}

</style>